<template>
  <div class="feed-container">
    <!-- 顶部标签页 -->
    <van-tabs 
      v-model="curId"
      :title-active-color="'#4c80e0'"
      :title-inactive-color="'#888888'"
      line-width="30"
      line-height="3"
    >
      <van-tab 
        :title="isNeedSign ? '已签' : '已读'" 
        name="1"
      >
        <user-list 
          :list="yesList"
          v-if="yesList.length > 0"
        />
        <van-empty v-else description="暂无数据" />
      </van-tab>
      
      <van-tab 
        :title="isNeedSign ? '未签' : '未读'" 
        name="2"
      >
        <user-list 
          :list="noList"
          v-if="noList.length > 0"
        />
        <van-empty v-else description="暂无数据" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 用户列表组件


export default {
  name: 'ReadSignDetail',

  components: {
    UserList
  },

  data() {
    return {
      curId: '1',
      isNeedSign: null,
      yesList: [],
      noList: []
    }
  },

  created() {
    // 获取路由参数
    const params = this.$route.query.params
      ? JSON.parse(this.$route.query.params)
      : {}
    
    // 设置数据
    this.isNeedSign = params.isNeedSign
    this.yesList = params.yesList || []
    this.noList = params.noList || []
    this.curId = params.tabVal || '1'

    // 设置标题
    document.title = this.isNeedSign ? '签收详情' : '阅读详情'
  }
}
</script>

<style lang="scss" scoped>
.feed-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 10px 0;

  .user-list {
    padding: 0 10px;

    .user-item {
      margin: 10px 0;
      padding: 10px;
      background: white;
      border-radius: 5px;
      border: 1px solid #ddd;
      display: flex;
      align-items: center;

      .user-avatar {
        margin-right: 10px;
      }

      .user-info {
        flex: 1;
        overflow: hidden;

        .username {
          display: block;
          font-size: 14px;
          color: #333;
          margin-bottom: 5px;
        }

        .time {
          display: block;
          font-size: 12px;
          color: #888;
        }
      }
    }
  }
}

// 文本省略混入
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 覆盖 Vant 样式
:deep(.van-tabs__wrap) {
  background: #fff;
}
</style>